<template>
    <div class="table">
        <div class="content-common">
           <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
            
             <el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
             <el-col :span="10" style="text-align:right">
				

				<el-row>
						<el-col :span="6">
							<el-button type="primary" icon="download" @click="xiazaimuban">下载模板</el-button>
							
						</el-col>
						<el-col :span="6">
							
							<el-button icon="plus" type="primary"  @click="handleAdd">新增单条</el-button>
						</el-col>
						<el-col :span="6">
							<el-upload
							:headers="headers"
							  :action="daoruUrl"
							  :show-file-list="false"
							  :on-success="filesuccess"
							  >
							  <el-button icon="upload"  type="primary">导入多条</el-button>
							</el-upload>

						</el-col>
						<el-col :span="6">
							<el-button  type="primary" icon="download" @click="daochuexcell">导出记录</el-button>
						</el-col>
					</el-row>
           			
             </el-col>


           </el-row>
		   
		   <el-row style="padding:5px 0">
				<el-col :span="7">
					观测年：{{titleyear}}
				</el-col>
				<el-col :span="10" style="text-align:center;font-size:18px;font-weight:bold">
				{{titletitle}}径流小区田间管理记录表
				</el-col>
				<el-col :span="7">
				
			</el-col>
			</el-row>
            <el-table
                :data="tableData"
                border
               
                class="table-common"
              
                header-cell-class-name="table-header"
               
            >
               <el-table-column align="center" prop="areaCode" label="小区号"></el-table-column>
               <el-table-column align="center" prop="month" label="月"></el-table-column>
                <el-table-column align="center" prop="day" label="日"></el-table-column>
				<el-table-column align="center" prop="operate" label="田间操作"></el-table-column>
				<el-table-column align="center" prop="tool" label="工具"></el-table-column>
			
				<el-table-column align="center" prop="tillageDepth" label="土壤耕作深度(cm)"></el-table-column>
				
				<el-table-column align="center" prop="recorder" label="记录人"></el-table-column>
				<el-table-column align="center" prop="reviewer" label="审核人"></el-table-column>
				<el-table-column align="center" prop="remark" label="备注"></el-table-column>
				
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger"   @click="handleDelete(scope.row)"
                            >删除</el-button
                        >
					
						
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="500px">
            <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="top">
				<el-row type="flex" justify="space-between">
				    <el-col :span="11">
						<el-form-item label="月" prop="month">
							<el-select v-model="form.month" filterable placeholder="请选择">
							    <el-option  
							      v-for="item in 12"
							      :key="item"
							      :label="item"
							      :value="item">
							    </el-option>
											
							</el-select>
						  
						</el-form-item>
									 
					</el-col>
				    <el-col :span="11">
						<el-form-item label="日" prop="month">
							<el-select v-model="form.day" filterable placeholder="请选择">
							    <el-option  
							      v-for="item in 31"
							      :key="item"
							      :label="item"
							      :value="item">
							    </el-option>
											
							</el-select>
						  
						</el-form-item>
						
					</el-col>
				</el-row>
				<el-row type="flex" justify="space-between">
				    <el-col :span="11">
						<el-form-item label="小区号" prop="areaCode">
							
							<el-select v-model="form.areaCode" placeholder="小区号">
							    <el-option
							      v-for="item in xiaoqudata"
							      :key="item.stnm+item.areaCode+'号'"
							      :label="item.stnm+item.areaCode+'号'"
							      :value="item.areaCode">
							    </el-option>
							  </el-select>
						</el-form-item>
									 
					</el-col>
				    <el-col :span="11">
						<el-form-item label="田间操作" prop="operate">
						    <el-input v-model="form.operate" placeholder="请输入田间操作"></el-input>
						</el-form-item>
						
					</el-col>
				</el-row>
				<el-row type="flex" justify="space-between">
					<el-col :span="11">
						<el-form-item label="工具" prop="tool">
						    <el-input v-model="form.tool" placeholder="请输入工具"></el-input>
						</el-form-item>
						
					</el-col>
				    <el-col :span="11">
						<el-form-item label="土壤耕作深度(cm)">
						    <el-input v-model="form.tillageDepth" placeholder="请输入土壤耕作深度(cm)"></el-input>
						</el-form-item>
									 
					</el-col>
				   
				</el-row>
				<el-row type="flex" justify="space-between">
				    <el-col :span="11">
						<el-form-item label="备注">
						    <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
						</el-form-item>
									 
					</el-col>
				    <el-col :span="11">
						
						
					</el-col>
				</el-row>
             
            </el-form>
			<template #footer>
                <span  class="dialog-footer">
                    
                  
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>


import { sysdictviewlistDictItem,reportfieldManageeditdoApprove,reportfieldManageeditrevokeRecord,reportfieldManageeditsubmitRecord,
viewPageStationInfo,rainfallImportRainfallDaily,reportfieldManageviewlistDetail, reportfieldManagesaveaddDetail, 
reportfieldManageremovedelDetail } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'tianjianguanlimingxi',
    data() {
        return {
			headers: {
			  Authorization: sessionStorage['token']
			},
			status:'/',
			rules: {
			  month: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  day: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  areaCode: [
								{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  operate: [
				{ required: true, message: '必填项', trigger: 'change' }
			  ],
			  tillageDepth: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  tool: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ]
			},
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                year:moment().format('YYYY')
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
              
            },
			stationData:[],
			checkArr:[],
			tijiaoform:{
				
			},
			daoruUrl:'',
			selnow:{},
			xiaoqudata:[],
			titletitle:'',
			titleyear:''
        };
    },
    created() {
		this.daoruUrl =
      globalVar.jingliujiangyuUrl + "/soilWater/runoffField/record/fieldManage/import/importRecordDetail?headNo="+this.$route.query.recordNo;
		this.xiaoqudata=JSON.parse(sessionStorage.getItem('xiaoquxinxi'))
		this.status=this.$route.query.status

		this.titletitle=this.$route.query.stnm
		this.titleyear=this.$route.query.year
		this.globalUser=globalUser
        let that = this;
        that.getData();
		this.getstationData()
		this.getchecktype()
		
    },
    methods: {
		filesuccess(e){
			if(e.code==5000){
				this.$message.error(e.object);
			}else{
				 this.$message.success("操作成功");
			}
			
			this.getData()
			
		},
		daochuexcell(){
			let headNo=this.$route.query.recordNo
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/record/fieldManage/export/exportRecordData?headNo='+headNo
		},
		xiazaimuban(){
			let that=this
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/record/fieldManage/download/downloadTemp'
			 
			
			this.$message.success('下载成功');
		},
		prepage(item){
			this.$router.go(-1);
		},
		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			reportfieldManageeditdoApprove(that.tijiaoform).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		getchecktype(){
			let that=this
			sysdictviewlistDictItem({
				dictCode:'ZD-000004'
			}).then(e=>{
				that.checkArr=e.object
			}).catch(err=>{
				console.log(err)
			})
		},
		shenpi(item){
			this.shenpilog=true
			this.selnow=item
			
		},
		getstationData() {
			let data={
				currentPage:1,
				pageSize:1000
			}
		    viewPageStationInfo(data).then((res) => {
		       
				this.stationData = res.object.dataList.filter(item=>{
                    return item.stType==systype
                });
		       
		       
		    });
		},

      
        getData() {
			let data={
				headNo:this.$route.query.recordNo

			}
            reportfieldManageviewlistDetail(data).then((res) => {
               
                this.tableData = res.object;
               
                
            });
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
            let detailData={
				detailNo:[row.detailNo],
				headNo:row.headNo
			}
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    reportfieldManageremovedelDetail( detailData ).then((e) => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
        },
		
		
        // 编辑操作
        handleEdit(row) {
            this.form = row;
			
            this.logTitle = '编辑田间管理明细';
           
            this.editVisible = true;
        },
        handleAdd() {
            this.logTitle = '新增田间管理明细';
            this.form = {
                recorder:stationInfo.observerName,
				reviewer:stationInfo.reviewerName
            };
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            let that=this
			this.$refs['form'].validate((valid) => {
			  if (valid) {
				that.form.headNo=this.$route.query.recordNo
				 reportfieldManagesaveaddDetail([that.form]).then((e) => {
				     this.editVisible = false;
				     this.$message.success('操作成功');
				     this.getData();
				 });
			  } else {
				
				return false;
			  }
			});   
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>

